<!-- src/views/warehousing/toBeUp/toBeUp.vue -->
<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getWarehousingEntryDetailsPageApi, updateEntryDetailsStatusApi } from '@/api/warehousingEntryDetails';
import { getCountAbleApi } from '@/api/warehousingEntryDetailsSort';
import ShangjiaDialog from './ShangjiaDialog.vue'; // 引入上架弹窗组件

// 上架弹窗相关
const shangjiaDialogVisible = ref(false)
const currentShangjiaRow = ref(null)
const ableCount = ref(0)

const page = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)
const entryDetailsList = ref([])
const searchForm = ref({
  status: 5  
})

// 表格选中项
const selectedRows = ref([])

const statusOptions = [
  { label: '未到货', value: 1 },
  { label: '已到货', value: 2 },
  { label: '已卸货', value: 3 },
  { label: '分拣中', value: 4 },
  { label: '完成分拣', value: 5 }
]

// 处理表格选择
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 撤销到货方法
const reset = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一条记录')
    return
  }
  
  // 提取选中行的ID
  const ids = selectedRows.value.map(row => row.id)
  
  try {
    const res = await updateEntryDetailsStatusApi(ids, 2) 
    if (res.code === 1) {
      ElMessage.success('撤销成功')
      // 刷新数据
      getEntryDetailsPage()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const handleSearch = () => {
  page.value = 1
  getEntryDetailsPage()
}

// 获取可上架数量并打开弹窗
const shangjia = async (row) => {
  try {
    currentShangjiaRow.value = row
    const res = await getCountAbleApi(row.id)
    if (res.code === 1) {
      ableCount.value = res.data
      shangjiaDialogVisible.value = true
    } else {
      ElMessage.error(res.msg || '获取可上架数量失败')
    }
  } catch (error) {
    ElMessage.error('获取可上架数量失败')
  }
}

// 上架成功回调
const handleShangjiaSuccess = () => {
  // 刷新数据
  getEntryDetailsPage()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  page.value = 1
  getEntryDetailsPage()
}

const handleCurrentChange = (val) => {
  page.value = val
  getEntryDetailsPage()
}

const getEntryDetailsPage = async () => {
  // 传递状态参数给后端接口
  const res = await getWarehousingEntryDetailsPageApi(page.value, pageSize.value, searchForm.value.status)
  entryDetailsList.value = res.data.rows
  totalSize.value = res.data.total
}

const formatStatus = (status) => {
  const statusMap = {
    1: '未到货',
    2: '已到货',
    3: '已卸货',
    4: '分拣中',
    5: '完成分拣'
  }
  return statusMap[status] || '未知状态'
}

onMounted(() => {
  getEntryDetailsPage()  // 初始加载时会默认查询状态为5的数据
})
</script>

<template>
  <div class="toBeUp-container">
    <div class="search-toolbar">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="批次号">
          <el-input 
            v-model="searchForm.batchNumber" 
            placeholder="请输入" 
            clearable 
            style="width: 180px;"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
          <el-button icon="Refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table 
      :data="entryDetailsList" 
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange"
      border
      stripe
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="code" label="商品编码" min-width="120" />
      <el-table-column prop="title" label="商品名称" min-width="150" />
      <el-table-column prop="batchNumber" label="批次号" min-width="120" />
      <el-table-column prop="consignorName" label="货主" min-width="100" />
      <el-table-column prop="supplierName" label="供应商" min-width="120" />
      <el-table-column prop="predictedArrivalTime" label="预测到达时间" min-width="160" />
      <el-table-column prop="realArrivalTime" label="实际到达时间" min-width="160" />
      <el-table-column prop="count" label="分拣数量" min-width="100" />
      <el-table-column prop="status" label="状态" min-width="100">
        <template #default="scope">
          <el-tag 
            :type="scope.row.status === 5 ? 'success' : 'info'"
          >
            {{ formatStatus(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" icon="Upload" @click="shangjia(scope.row)">上架</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px; justify-content: flex-end;"
      />
    </div>

    <!-- 上架弹窗组件 -->
    <ShangjiaDialog
      v-model:visible="shangjiaDialogVisible"
      :row-data="currentShangjiaRow"
      :able-count="ableCount"
      @success="handleShangjiaSuccess"
    />
  </div>
</template>

<style scoped>
.toBeUp-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.search-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 15px;
}

.search-form :deep(.el-form-item__label) {
  font-weight: normal;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .search-toolbar {
    justify-content: center;
  }
  
  .search-form {
    flex-wrap: wrap;
  }
  
  .search-form :deep(.el-form-item) {
    margin-bottom: 10px;
  }
}
</style>